<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
<el-row  v-show="Show" style="width: 1024px;margin: 0 auto;">
  <div class="base-info-wrap">
    <el-row class="basicinfowrap" v-loading="isloadbaseinfo">
      <div class="basicinfo">
        <span class="buildtitle">基本情况</span>
      </div>
      <el-form :model="basicForm" label-position="top" ref="basicForm" class="demo-basicForm">
        <el-form-item label="建筑名称" prop="bname" style="float: left;">
          <el-input v-model="basicForm.bname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="竣工时间" prop="bTimeLong" style="float: right;">
          <el-date-picker
            v-model="basicForm.bTimeLong"
            type="date"
            format="yyyy 年 MM 月 dd 日"
             value-format="timestamp"
            placeholder="选择日期" style="width: 100%;" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="建筑地址" prop="baddress" style="float: left;">
          <el-input v-model="basicForm.baddress" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联网单位" prop="oid" style="float: right;">
          <el-select v-model="basicForm.oid" style="width:100%;" :disabled="true">
            <el-option :label="item.oname" :value="item.id" v-for="(item,index) in networkbuilds" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="linkman" style="float: left;">
          <el-input v-model="basicForm.linkman" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="linkphone" style="float: right;">
          <el-input v-model="basicForm.linkphone" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="basicinfowrap" v-loading="isloadbaseinfo">
      <div class="basicinfo">
        <span class="buildtitle">地理信息</span>
      </div>
      <el-form :model="areaForm" label-position="top" ref="areaForm" class="demo-basicForm">
        <el-form-item label="详细地址" prop="addressDetail" style="float: left;">
          <el-input v-model="areaForm.addressDetail" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="路名" prop="road" style="float: right;">
          <el-input v-model="areaForm.road" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="6位行政区域编码" prop="zxqy" style="float: left;">
          <el-input v-model="areaForm.zxqy" :disabled="true" maxlength="6"></el-input>
        </el-form-item>
        <el-form-item label="3位街道编码" prop="street" style="float: right;">
          <el-input v-model="areaForm.street" :disabled="true" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="门弄牌号" prop="mnph" style="float: left;">
          <el-input v-model="areaForm.mnph" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="楼栋幢" prop="ldz" style="float: right;">
          <el-input v-model="areaForm.ldz" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="经度/纬度" prop="gis">
          <el-input v-model="areaForm.gis==''?'未标记':'已标记'" :disabled="true">
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="basicinfowrap" v-loading="isloadbaseinfo">
      <div class="basicinfo">
        <span class="buildtitle">建筑详情</span>
      </div>
      <el-form :model="buildForm" label-position="top" ref="buildForm" class="demo-basicForm">
        <el-form-item label="建筑高度" prop="bhight" style="float: left;">
          <el-input v-model="buildForm.bhight" :disabled="true" maxlength="7"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积" prop="barea" style="float: right;">
          <el-input v-model="buildForm.barea" :disabled="true" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="建筑分类" prop="bstore" style="float: left;">
          <el-select v-model="buildForm.bstore" style="width:100%;" :disabled="true">
            <el-option label="公共建筑" value="公共建筑"></el-option>
            <el-option label="住宅建筑" value="住宅建筑"></el-option>
            <el-option label="工业建筑" value="工业建筑"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建筑结构" prop="bstrture" style="float: right;">
          <el-select v-model="buildForm.bstrture" style="width:100%;" :disabled="true">
            <el-option label="砖混结构" value="砖混结构"></el-option>
            <el-option label="钢结构" value="钢结构"></el-option>
            <el-option label="钢筋混凝土结构" value="钢筋混凝土结构"></el-option>
            <el-option label="其他结构" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="耐火等级" prop="fireRate" style="float: left;">
          <el-select v-model="buildForm.fireRate" style="width:100%;" :disabled="true">
            <el-option label="1级" value="1级"></el-option>
            <el-option label="2级" value="2级"></el-option>
            <el-option label="3级" value="3级"></el-option>
            <el-option label="4级" value="4级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="危险等级" prop="fireDanger" style="float: right;">
          <el-select v-model="buildForm.fireDanger" style="width:100%;" :disabled="true">
            <el-option label="1级" value="1级"></el-option>
            <el-option label="2级" value="2级"></el-option>
            <el-option label="3级" value="3级"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消控室" prop="haveCtrlroom" style="float: left;">
          <el-select v-model="buildForm.haveCtrlroom" style="width:100%;" :disabled="true">
            <el-option label="有" value="1"></el-option>
            <el-option label="无" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消控室位置" prop="ctrlroomPlace" style="float: right;">
          <el-input v-model="buildForm.haveCtrlroom==0?buildForm.ctrlroomPlace='':buildForm.ctrlroomPlace" :disabled="true||buildForm.haveCtrlroom==0"></el-input>
        </el-form-item>
        <el-form-item label="建筑使用情况" prop="bstate" style="float: left;">
          <el-select v-model="buildForm.bstate" style="width:100%;" :disabled="true">
            <el-option label="使用中" value="1"></el-option>
            <el-option label="未使用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建筑用途分类" prop="useType" style="float: right;">
          <el-input v-model="buildForm.useType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="产权及使用情况" prop="propertRight" style="float: left;">
          <el-select v-model="buildForm.propertRight" style="width:100%;" :disabled="true">
            <el-option label="独家产权、独立使用" value="0"></el-option>
            <el-option label="独家产权，多家使用" value="1"></el-option>
            <el-option label="多家产权、多家使用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="占地面积" prop="bzdArea" style="float: right;">
          <el-input v-model="buildForm.bzdArea" :disabled="true" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="标准层面积" prop="bzcArea" style="float: left;">
          <el-input v-model="buildForm.bzcArea" :disabled="true" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="地下层数" prop="underFloor" style="float: right;">
          <el-input v-model="buildForm.underFloor" :disabled="true" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="地下面积" prop="underFloorArea" style="float: left;">
          <el-input v-model="buildForm.underFloorArea" :disabled="true" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="地上层数" prop="upFloor" style="float: right;">
          <el-input v-model="buildForm.upFloor" :disabled="true" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="地上面积" prop="upFloorArea" style="float: left;">
          <el-input v-model="buildForm.upFloorArea" :disabled="true" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="避难层数量" prop="refugeNumber" style="float: right;">
          <el-input v-model="buildForm.refugeNumber" :disabled="true" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="避难层面积" prop="refugeArea" style="float: left;">
          <el-input v-model="buildForm.refugeArea" :disabled="true" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="避难层位置" prop="refugePlace" style="float: right;">
          <el-input v-model="buildForm.refugePlace" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="消防电梯数" prop="liftCount" style="float: left;">
          <el-input v-model="buildForm.liftCount" :disabled="true" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item label="消防电梯位置" prop="liftPlace" style="float: right;">
          <el-input v-model="buildForm.liftPlace" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="入住使用功能" prop="useKind" style="float: left;">
          <el-input v-model="buildForm.useKind" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="最大容纳人数" prop="mostworkerr" style="float: right;">
          <el-input v-model="buildForm.mostworkerr" :disabled="true" maxlength="8"></el-input>
        </el-form-item>
        <el-form-item label="自动消防设施" prop="haveFireproof" style="float: left;">
          <el-select v-model="buildForm.haveFireproof" style="width:100%;" :disabled="true">
            <el-option label="有" value="1"></el-option>
            <el-option label="无" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设施完好情况" prop="xfssIntact" style="float: right;">
          <el-select v-model="buildForm.xfssIntact" style="width:100%;" :disabled="true">
            <el-option label="合格" value="1"></el-option>
            <el-option label="不合格" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消防设施" prop="xfss" style="float: right;width: 100%;">
          <el-input type="textarea" v-model="buildForm.xfss" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="毗邻建筑情况" prop="nearBuilding" style="float: right;width: 100%;">
          <el-input type="textarea" v-model="buildForm.nearBuilding" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="地理情况" prop="geogInfo" style="float: right;width: 100%;">
          <el-input type="textarea" v-model="buildForm.geogInfo" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="basicinfowrap" v-loading="isloadbaseinfo">
      <div class="basicinfo">
        <span class="buildtitle">操作信息</span>
      </div>
      <el-form :model="handleForm" label-position="top" class="demo-basicForm">
        <el-form-item label="修改人" prop="updUserName" style="float: left;">
          <el-input v-model="handleForm.updUserName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="修改时间" prop="updTime" style="float: right;">
          <el-input v-model="handleForm.updTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="crtUserName" style="float: left;">
          <el-input v-model="handleForm.crtUserName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="crtTime" style="float: right;">
          <el-input v-model="handleForm.crtTime" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    </div>
</el-row>
</template>
<script>
  import {
  getNetworkAll,//获取联网单位
  getBuidldInfo,//获取建筑物信息
  putBuildObj//更新建筑物
} from "@/api/admin/build/index";
  export default{
  	props:{
  		infoId:{
  			type:String,
  			default:""
  		},
  		Show:{
  			type:Boolean,
  			default:false,
  		}
  	},
    data(){
      let self=this;
      return {
        basicForm:{
          bname:"",
          bTimeLong:"",
          baddress:"",
          oid:"",
          linkman:"",
          linkphone:"",
        },
        areaForm:{
          addressDetail:"",
          road:"",
          zxqy:"",
          street:"",
          mnph:"",
          ldz:"",
          gis:"",
        },
        buildForm:{
          bhight:"",
          barea:"",
          bstore:"",
          bstrture:" ",
          fireRate:"",
          fireDanger:"",
          haveCtrlroom:"",
          ctrlroomPlace:"",
          bstate:"",
          useType:"",
          propertRight:"",
          bzdArea:"",
          bzcArea:"",
          underFloor:"",
          underFloorArea:"",
          upFloor:"",
          upFloorArea:"",
          refugeNumber:"",
          refugeArea:"",
          refugePlace:"",
          liftCount:"",
          liftPlace:"",
          useKind:"",
          mostworkerr:"",
          haveFireproof:"",
          xfssIntact:"",
          xfss:"",
          nearBuilding:"",
          geogInfo:"",
        },
        handleForm:{
          updUserName:"",
          updTime:"",
          crtUserName:"",
          crtTime:"",
        },
        isloadbaseinfo:false,
        networkbuilds:[],
      }
    },
    methods: {
      getdata(val){
        if (val) {
          getBuidldInfo(val).then(data => {
            this.handledata(data.data);
            this.isloadbaseinfo=false;
            })
        }else{
          this.resetVal();
          this.isloadbaseinfo=false;
        }
      },
      handledata(data){
          this.resetVal();
          for(let item in data){
            if (this.basicForm.hasOwnProperty(item)) {
              this.basicForm[item]=data[item];
            }else if (this.areaForm.hasOwnProperty(item)) {
              this.areaForm[item]=data[item];
            }else if (this.buildForm.hasOwnProperty(item)) {
              this.buildForm[item]=data[item];
            }else if (this.handleForm.hasOwnProperty(item)) {
              this.handleForm[item]=data[item];
            }
          }
      },
      resetVal(){
        for(let item in this.basicForm){
          this.basicForm[item]="";
        };
        for(let item in this.areaForm){
          this.areaForm[item]="";
        };
        for(let item in this.buildForm){
          this.buildForm[item]="";
        };
        for(let item in this.handleForm){
          this.handleForm[item]="";
        };
      }
    },
    watch:{
      	'Show':{
	      	immediate:true,
	      	handler:function(val){
		      	if (val) {
		          this.isloadbaseinfo=true;
		          this.getdata(this.infoId);
		          getNetworkAll().then(res=>{
		            this.networkbuilds=res;
		          })
		        }else{
		          this.isloadbaseinfo=false;
		        }
	      	}
  		}
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">

.base-info-wrap {
	.basicinfowrap{
        width: 100%;
      }
}
.xf-query-input,
.xf-query-select {
  width: 200px;
  margin: 0 10px;
}
.fulldialog > div {
  margin: 0 auto;
}
.fulldialog .el-dialog__title {
  font-size: 32px;
}
.fulldialog {
  .el-dialog__header {
    margin-top: 20px;
  }
  .el-checkbox {
    display: block;
    margin-left: 0;
  }
  .custom-dialog-btn {
    position: absolute;
    font-size: 30px;
    left: 40px;
    top: 20px;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
.basicinfowrap{
  padding-right: 30px;
  .el-form-item__label{
    padding:0;
  }
  .el-form-item{
    margin-bottom: 12px;
    width: 48.9%;
  }
}
.buildtitle{
  font-size:24px;
}
.buildedit{
  font-size:14px;
  user-select:none;
  cursor:pointer;
}
.demo-basicForm{
  margin-top:24px;
}
.base-info-wrap .el-input__inner{
  color:rgba(255,255,255,.7) !important;
}
.base-info-wrap .el-textarea.is-disabled .el-textarea__inner{
  color:#666666 !important;
}
.is-disabled{
  cursor: not-allowed !important;
  .el-cascader__label{
    cursor: not-allowed !important;
    color:rgba(255,255,255,.7) !important;
  }
}
</style>
